<script setup lang="ts">
import {faker} from "@faker-js/faker";
import ImagePreviewFull from "~/components/ai/ImagePreviewFull.vue";
import type {Role} from "~/utils/jiangying";
import type {Image} from "~/composables/drawhooks";
import type {ComfyUIOptions, ComfyUIProperties} from "~/utils/comfyuiApi";


// export interface WaterfallImage {
//   url: string;
//   name: string;
//   generateParams: string;
// }
//
// const images=defineModel<Image[]>({
//   default:[{
//     url:'https://img.yzcdn.cn/vant/cat.jpeg',
//     title:'',
//     description:'',
//   }]
// })

/**
 * 获取绘图历史数据
 */
interface DrawHistoryItem {
  _id: string
  user_id?: string
  prompt_id?: string
  params?: ComfyUIProperties,
  created_at?: number
  options?: ComfyUIOptions
  status?: 0 | 1
  output?: string[]
  is_deleted?: boolean;
  is_public?: boolean;
}

const {user} = useAuthStore()
const images = ref<DrawHistoryItem[]>([])

onMounted(async () => {
  await handleGetHistory()
})


//获取绘画历史
const handleGetHistory = async () => {
  const res = await Client_POST('/draw/history/findMany' , {
    is_deleted: false,
    is_public: true,
  }) as DrawHistoryItem[]
  console.log('获取图集', res)
  if (res) {
    images.value = res
  }
}






const sdStore = useStableDiffusionStore()
const useWorkDeleteByindex=(index:number)=>{
  // if (images.value){
  //   images.value=images.value.filter((item,i)=>{
  //     return i!==index
  //   })
  // }
}

// 预览图片
const preview_src = ref('')
const visible = ref(false)
const viewImage = (src: string) => {
  // console.log(src)
  preview_src.value = src
  visible.value = true
}

// 当index为js的偶数时，返回480，否则返回240
const getPhotoHeight = (index: number) => {
  let height = 0;
  if (index % 3 === 0) {
    height = 480;
  } else if (index % 3 === 1) {
    height = 240;
  } else {
    height = 360;
  }
  return height;
};


// const loadMore = () => {
//   photos.value = photos.value.concat(
//     Array.from({ length: 5 }, (value, index) => ({
//       id: photos.value.length + index + "",
//       url: faker.image.animals(undefined, getPhotoHeight(index), true),
//       title: faker.lorem.word(),
//       description: faker.lorem.text(),
//     }))
//   );
// };

const onScroll = (e: any) => {
  const target = e.target;
  const scrollBottom =
      target.scrollHeight - target.scrollTop - target.clientHeight;
  console.log(scrollBottom);

  if (scrollBottom < 1) {
    setTimeout(() => {
      // loadMore();
    }, 1000);
  }
};
</script>

<template>
  <v-container class="h-full" v-scroll.self="onScroll">
    <v-card>
      <masonry-wall :items="images" :ssr-columns="1" :column-width="350" :padding="30">
        <template #default="{ item,index }">
          <v-card class="ma-3">
            <v-img
                @click="viewImage(item.output[0]||'')"
                class="align-end text-white"
                :src="item.output[0]||''"
                :lazy-src="item.output[0]||''"
                cover
            >
              <template v-slot:placeholder>
                <v-row class="fill-height ma-0" align="center" justify="center">
                  <v-progress-circular
                      indeterminate
                      color="grey-lighten-5"
                  ></v-progress-circular>
                </v-row>
              </template>
              <v-card-title>{{ item.options?.workflow_name  }}</v-card-title>
            </v-img>

            <v-card-subtitle class="pt-2">
              {{ item.params?.positive }}
            </v-card-subtitle>

<!--            <v-card-actions>-->
<!--              <v-btn size="x-small" icon="mdi-heart" variant="flat"></v-btn>-->
<!--              <v-btn size="x-small" icon="mdi-delete" @click="useWorkDeleteByindex(index)" variant="flat"></v-btn>-->
<!--            </v-card-actions>-->
          </v-card>
        </template>
      </masonry-wall>
    </v-card>
  </v-container>
  <image-preview-full v-model:src="preview_src" v-model:visible="visible"/>
</template>

<style scoped></style>
